﻿
@{
    ViewBag.Title = "用户管理";
}
@using WebApplicationFileSys.Models;
<main style="padding:20px;">
    <h2>用户管理</h2>
    <table class="layui-hide" id="ID-table-demo-editmodes"></table>
</main>

@if (LoginMode.admin)
{

    if (LoginMode.LV == "1")
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="role">
                <span>{{role(d.role) || '未授权用户' }}</span>

            </button>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="LV">
                <span>{{LV(d.LV) || '未授权用户' }}</span>

            </button>
        </script>
    }
    else if (LoginMode.LV != "1" && (Model as List<Login>).First().username == LoginMode.username)
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <span>{{role(d.role) || '未授权用户' }}</span>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <span>{{LV(d.LV) || '未授权用户' }}</span>
        </script>
    }
    else
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <span>{{role(d.role) || '未授权用户' }}</span>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="LV">
                <span>{{LV(d.LV) || '未授权用户' }}</span>

            </button>
        </script>
    }

}
else

{
    <script type="text/html" id="TPL-dropdpwn-demo">
        <span>{{role(d.role) || '未授权用户' }}</span>
    </script>
    <script type="text/html" id="TPL-dropdpwn-demo2">
        <span>{{LV(d.LV) || '未授权用户' }}</span>
    </script>
}

<script>
    function LV(cs) {
        lsit = {
            1: {
                title: 'LV 1'
            },
            2: {
                title: 'LV 2'
            }
        }
        return lsit[cs]?.title || null;
    }
    function role(cs) {
        lsit = {
            "user": {
                title: '用户'
            },
            "admin": {
                title: '管理员'
            }
        }
        return lsit[cs]?.title || null;
    }



        layui.use(function () {
            var $ = layui.$;
            var table = layui.table;
            var dropdown = layui.dropdown;


            // 渲染
            table.render({
                elem: '#ID-table-demo-editmodes',
                 data: @Html.Raw(Json.Encode(Model)),
                page: true,
                css: [ // 设置单元格样式
                    // 取消默认的溢出隐藏，并设置适当高度
                    '.layui-table-cell{height: 50px; line-height: 40px;}',
                    '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                    '.layui-table-cell select{height: 36px; padding: 0 5px;}'
                ].join(''),
                cols: [
                    [

                        { field: 'username', title: 'ID', width: 80, sort: true },
                        { field: 'username', title: '用户名', edit: 'text' },
                        { field: 'password', title: '密码', edit: 'text' },
                        { field: 'role', with: 80, title: '类型',  align: 'center', templet: '#TPL-dropdpwn-demo' },
                        { field: 'LV', with: 80, title: '等级', align: 'center', templet: '#TPL-dropdpwn-demo2' }
                    ]
                  ],
                done: function (res, curr, count) {
                    var options = this;

                    // 获取当前行数据
                    table.getRowData = function (tableId, elem) {
                        var index = $(elem).closest('tr').data('index');
                        return table.cache[tableId][index] || {};
                    };
                    // dropdown 方式的下拉选择 - 角色
                    dropdown.render({
                        elem: '.dropdpwn-demo[data-field="role"]',

                        data: [{
                            title: '管理员',
                            id: 'admin'
                        }, {
                            title: '用户',
                            id: 'user'
                            }],
                        click:async function (obj) {
                            var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                            this.elem.find('span').html(obj.title);
                            // 更新数据中对应的字段
                            data.role = obj.id;

                            let response = await axios.post("/Home/PutUser", data);
                            if (response != null) {
                                if (response) {
                                    layer.msg(response.data.Msg);
                                } else {
                                    layer.msg(response.data.Msg);
                                }
                          }
                        }
                    });
                    // dropdown 方式的下拉选择 - 等级
                    dropdown.render({
                        elem: '.dropdpwn-demo[data-field="LV"]',

                        data: [ {
                            title: "LV 1",
                            id: 1
                        }, {
                            title: "LV 2",
                            id: 2
                            }],
                        click:async function (obj) {
                            var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                            this.elem.find('span').html(obj.title);
                            // 更新数据中对应的字段
                            data.LV = obj.id;
                            let response = await axios.post("/Home/PutUser", data);
                            if (response != null) {
                                if (response) {
                                    layer.msg(response.data.Msg);
                                } else {
                                    layer.msg(response.data.Msg);
                                }
                            }

                        }
                    });



                    // 单元格普通编辑事件
                    table.on('edit(ID-table-demo-editmodes)', async function (obj) {
                        var value = obj.value // 得到修改后的值
                        var data = obj.data // 得到所在行所有键值
                        var field = obj.field; // 得到字段

                        // 更新数据中对应的字段
                        var update = {};
                        update[field] = value;
                        obj.update(update);
                        let response = await axios.post("/Home/PutUser", data);
                        if (response!=null) {
                            if (response) {
                                layer.msg(response.data.Msg);
                            } else {
                                layer.msg(response.data.Msg);
                            }
                        }

                        // 显示 - 仅用于演示

                    });

                    // 更多编辑方式……
                }
            });
        });
</script>
